<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品信息</title>
</head>
<style>
    #footer {
        margin-left: 50%;
        margin-bottom: 40px;
        position: absolute;

        bottom: 0;
    }
    .goods{
        outline:#00FF00 dotted thick;
        border-radius:2em;
    }

</style>
<script src="../../plugins/vue/vue.js"></script>
<script  src="../../plugins/axios/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script src="../../plugins/element-ui/index.js"></script>
<body>
<div id="app">
    <div>
        <template>
            <div>
               <!-- <div style="margin: 10px 0">
                    <el-input
                            style="width: 200px"
                            placeholder="请输入学号"
                            suffix-icon="el-icon-search"
                    ></el-input>
                    <el-select v-model="type" clearable placeholder="类型">
                        <el-option
                                v-for="item in types"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button
                            class="ml-5-5"
                            type="primary"
                            @click="load"
                            style="margin-left: 5px"
                    >搜索 <i class="el-icon-search"></i>
                    ></el-button-->
                    <el-button type="primary" style="margin-left: 5px" @click="changeStatus(1)" :disabled="btnUnChecked"
                    >未审核 </el-button>
                    <el-button type="success" style="margin-left: 5px"  @click="changeStatus(2)" :disabled="btnPassed"
                    >已通过 </el-button>
                    <el-button type="danger" style="margin-left: 5px"  @click="changeStatus(3)" :disabled="btnUnPassed"
                    >未通过 </el-button>
                </div>
            </div>
        </template>
    </div>

    <el-table
            :data="tableData"
            border
            stripe
    >
        <!-- <el-table-column
          align="center"
          type="selection"
          width="55"
        ></el-table-column> -->
        <el-table-column
                align="center"
                prop="goodsId"
                label="商品id"
                width="260"
        ></el-table-column>

        <el-table-column
                align="center"
                prop="goodsName"
                label="商品名称"
                width="288"
                :show-overflow-tooltip='true'
        ></el-table-column>

        <el-table-column
                align="center"
                prop="typeName"
                label="类别"
                width="80"
        ></el-table-column>


        <el-table-column
                align="center"
                prop="startingTime"
                label="开始时间"
                width="160"
        ></el-table-column>
        <el-table-column
                align="center"
                prop="endTime"
                label="结束时间"
                width="160"
        ></el-table-column>

        <el-table-column
                align="center"
                prop="status"
                label="状态"
                width="100"
        >
            <template v-slot="scope">
                <span v-if="scope.row.status == 1">未审核</span>
                <span v-if="scope.row.status == 2">已通过</span>
                <span v-if="scope.row.status == 3">未通过</span>
                <span v-if="scope.row.status == 4">交易完成</span>
                <span v-if="scope.row.status == 5">流拍</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="255" header-align="center">
            <template slot-scope="scope">
                <el-button type="primary" @click="viewDetails(scope.row)"size="small">查看详情 </el-button>
                <el-button
                        type="success"
                        slot="reference"
                        size="small" :disabled="btnPass" @Click="passGoods(scope.row)">通过 </el-button>
                </el-popconfirm>
                <el-button
                        type="danger"
                        slot="reference"
                        size="small"  :disabled="btnUnPass" @click="unPassGoods(scope.row)" >不通过 </el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <div class="block" id="footer">
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
    </div>

    <el-dialog title="原因" :visible.sync="ReasonVisible"  :append-to-body="true">
        <el-form :model="reasonForm">
            <el-form-item label="原因" :label-width="formLabelWidth">
                <el-input v-model="reasonForm.reason" autocomplete="off" type="textarea" :show-word-limit="true" :maxlength="100"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="doUnPass()">提 交</el-button>
        </div>
    </el-dialog>
</div>






</body>

<script>
    new Vue({
        el: "#app",
        data: {
            load:"",
            currentGoodsId: "",
            reasonForm:{
                reason: "",
                goodsId:"",
            },
            ReasonVisible: false,
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '120px',
            btnUnChecked: false,
            btnPassed: false,
            btnUnPassed: false,
            btnPass: false,
            btnUnPass: false,
            types: [
                {
                    value: '1',
                    label: '黄金糕'
                }, {
                    value: '2',
                    label: '双皮奶'
                }, {
                    value: '3',
                    label: '蚵仔煎'
                }, {
                    value: '4',
                    label: '龙须面'
                }, {
                    value: '5',
                    label: '北京烤鸭'
                }],
            type:"",
            tableData: [
                {
                    "goodsId": "1",
                    "userId": null,
                    "goodsName": "劳力士",
                    "deposit": "50",
                    "description": null,
                    "imageId": null,
                    "startingPrice": 500,
                    "startingTime": "2022/12/01 15:00",
                    "endTime": "2022/12/02 15:00",
                    "priceMarkup": "50",
                    "images": null,
                    "typeName": "表",
                    "status": "1",
                    "userName": "LostSouls",
                    "realName": null,
                    "phone": "15213324310",
                    "email": "2568938256@qq.com",
                    "breakCount": 0
                }
            ],
            dialogFormVisible: false,
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:8,//每页显示的记录数
                total:0,//总记录数
            },
            status: "1",
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        created(){
            this.getAll();
        },

        methods: {
            getAll(){
                this.btnUnChecked=true;
                this.btnPassed= true;
                this.btnUnPassed= true;
                this.btnPass=true;
                this.btnUnPass= true;
                if(this.status == "1"){
                    this.btnPass = false;
                    this.btnUnPass =false;
                    this.btnUnPassed = false;
                    this.btnPassed = false;
                }
                if(this.status == "2"){
                    this.btnUnChecked = false;
                    this.btnUnPassed =false;
                }
                if(this.status == "3"){
                    this.btnPassed = false;
                    this.btnUnChecked = false;
                }
                axios.get("/goodsInfo/getAll/"+this.pagination.currentPage+"/"+this.pagination.pageSize+"/"+this.status).then((res) =>{
                    this.tableData = res.data.data.list;
                    this.pagination.pagesize = res.data.data.pageSize;
                    this.pagination.currentPage = res.data.data.pageNum;
                    this.pagination.total = res.data.data.total;
                })

            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.load();
            },
            passGoods(row){
                axios.get("/goodsInfo/passGoods/" + row.goodsId).then((res) => {
                    if(res.data.code == 0){
                        this.$message.error(res.data.msg)
                    }else {
                        this.$message.success(res.data.data)
                    }
                    this.getAll()
                })
            },
            unPassGoods(row){
                this.ReasonVisible = true;
                this.reasonForm.goodsId = row.goodsId;
            },
            doUnPass(){

                if(this.reasonForm.reason != ""){
                    this.$message.error("aa");
                    axios.post("/goodsInfo/unPassGoods",this.reasonForm).then((res) =>{
                        if(res.data.code == 0){
                            this.$message.error(res.data.msg)
                        }else {
                            this.$message.success(res.data.data)
                        }
                        this. reasonForm= {reason: "", currentGoodsId:"",};
                        this.getAll();
                        this.ReasonVisible = false;
                    })
                }else{
                    this.$message.error("请先填写原因");
                }
            },
            viewDetails(row) {

                sessionStorage.setItem("goodsId",row.goodsId);
                window.location.href="./detail.html"
                // this.form = row;

                // this.dialogFormVisible= true;
                // this.$alert("点击" + this.dialogFormVisible)
            },
            changeStatus(status){
                this.status = status;
                this.pagination.currentPage = 1;
                this.getAll();
            }
        }
    })
</script>
</html>